<template>
  <div id="reportclass"
       style="overflow: hidden; background: rgb(244, 242, 247);">
    <div class="headerclass">
      <div class="logoclass"></div>
      <div class="textclass">报表系统</div>
      <div class="rightmenu">
        <el-dropdown class="avatar-container"
                     trigger="click">
          <div class="avatar-wrapper">
            <i class="saas-icon-power"
               @click="exitPage"></i>
          </div>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
    <!-- --background: linear-gradient(135deg,#323ac1 1%,#323a6e 10%);  rgb(43, 106, 166)-->
    <div class="containerclass">
      <div class="left">
        <dd-scroll-bar :wrap-style="{
          height: 'calc( 100vh  - 54px) '    }">
          <el-menu style="min-height: calc(100vh - 70px); "
                   text-color="#D3D4D7"
                   background-color="rgb(43, 106, 166)"
                   :collapse="isCollapse"
                   class="el-menu-vertical-demo"
                   :collapse-transition="true"
                   active-text-color="#fff"
                   :unique-opened="true"
                   :default-active="$route.path"
                   router
                   @select="handleSelect">
            <el-submenu v-for="(item, index) in navList"
                        :key="index"
                        :index="item.path">
              <template slot="title"><i style="font-size: 20px; color: rgb(254, 125, 2); position: relative;
              left: -7px;"
                   :class="item.icon"></i>
                {{item.name}}</template>
              <el-menu-item v-for="(subItem, subIndex) in  item.children"
                            :key="subIndex"
                            :index="subItem.path">
                {{subItem.name}}</el-menu-item>
            </el-submenu>
          </el-menu>
        </dd-scroll-bar>
      </div>
      <div :class="[isCollapse ?'right': 'closeright']">
        <!-- <dd-scroll-bar :wrap-style="{
          height: 'calc( 100vh  - 70px) '    }"> -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <i @click="colseMenu"
             :class="closeIcon"></i>
          <el-breadcrumb-item v-for="(item, index) in pathList"
                              :key="index"
                              :to="{path:item.path}">{{item.name}}
          </el-breadcrumb-item>
        </el-breadcrumb>
        <keep-alive>
          <router-view style="margin-left: 20px; margin-right:15px" />
        </keep-alive>
        <!-- </dd-scroll-bar> -->

      </div>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      closeIcon: 'el-icon-s-fold',
      isCollapse: false,
      activeIndex: '/onlineCust',
      navList: [{
        name: '在线座席相关报表',
        path: '/onlineCust',
        icon: 'el-icon-s-finance',
        children: [{
          name: '在线问卷调查统计表',
          path: '/onlineCust/onlineQuestionSurvey'
        }, {
          name: '在线问卷调查明细表',
          path: '/onlineCust/onlineQuestionDetails'
        }, {
          name: '在线座席无应答表',
          path: '/onlineCust/onlineNoResponse'
        }, {
          path: '/onlineCust/onlineBusinessDetail',
          name: '在线座席业务明细表'
        }, {
          path: '/onlineCust/onlineQyuickFuncClick',
          name: '在线客服快捷功能点击量统计表'
        }, {
          path: '/onlineCust/onlineCustomerServiceOperationTableData',
          name: '在线客服运营数据统计报表'
        }, {
          path: '/onlineCust/onlineCustomStateDetailTableData',
          name: '在线座席状态明细表'
        }, {
          path: '/onlineCust/onlineCustomStatusTable',
          name: '在线座席工作情况表'
        }]
      }, {
        icon: 'el-icon-s-custom',
        name: '客服中心报表',
        path: '/custCenter',
        children: [{
          path: '/custCenter/onlineDissatisfied',
          name: '客服中心座席不满意得分报表'
        }, {
          path: '/custCenter/onlineQualityTesting',
          name: '客服中心座席质检得分报表'
        }, {
          path: '/custCenter/qualityInspectionAnaly',
          name: '客服中心质检分析表'
        }, {
          path: '/custCenter/transactionFlow',
          name: '客服中心交易流水记录表'
        }, {
          path: '/custCenter/serviceLevel',
          name: '客服中心服务水平稳定性报表'
        }, {
          path: '/custCenter/customServiceCenterTable',
          name: '客服中心质检工作情况报表'
        }, {
          path: '/custCenter/customWokerWatchTimeOverTable',
          name: '客服中心职场监控超时表'
        }, {
          path: '/custCenter/customCenterSatisfied',
          name: '客服中心满意度明细表'
        }, {
          path: '/custCenter/customCenterInterDetail',
          name: '客服中心交互明细表'
        }, {
          path: '/custCenter/phoneSectionTable',
          name: '客服中心电话小结统计报表'
        }, {
          path: '/custCenter/customCenterOpeartCountTable',
          name: '客服中心运营数据统计报表'
        }]
      }, {
        name: '电话报表',
        path: '/phone',
        icon: 'el-icon-phone',
        children: [{
          path: '/phone/phoneOperationDataSheetOld',
          name: '电话银行运营数据报表（日时段）'
        }, {
          path: '/phone/phoneOperationDataSheet',
          name: '电话银行运营数据统计报表'
        }, {
          path: '/phone/IVRtrajectorytableData',
          name: '电话银行IVR轨迹明细报表'
        }, {
          path: '/phone/phoneStateDetailTableData',
          name: '电话座席状态明细表'
        }, {
          path: '/phone/phoneWorkStatusTable',
          name: '电话座席工作情况表'
        }, {
          path: '/phone/phoneBankOpenCountTable',
          name: '电话银行开通情况统计报表'
        }]
      }, {
        name: '交易报表',
        path: '/translate',
        icon: 'el-icon-s-marketing',
        children: [{
          path: '/translate/savingFundDetailTable',
          name: '储蓄资金交易明细表'
        }, {
          path: '/translate/trustActiveTranslateTable',
          name: '信用卡激活交易明细表'
        }, {
          path: '/translate/trustTranslateStagesTable',
          name: '信用卡交易分期明细表'
        }, {
          path: '/translate/trustTranslateCashInstallmentTable',
          name: '信用卡现金分期明细表'
        }, {
          path: '/translate/trustWithdrawalWillDetailsTable',
          name: '信用卡随意分提用明细表'
        }, {
          path: '/translate/trustValetTransactionsTable',
          name: '信用卡代客交易汇总统计表'
        }, {
          path: '/translate/shortMsgSendDetailTable',
          name: '短信发送明细表'
        }, {
          path: '/translate/shortMsgSendCountTable',
          name: '短信发送统计表'
        }, {
          path: '/translate/returnVisitsCallsDetail',
          name: '回访外呼明细表'
        }, {
          path: '/translate/scoreExchangeDetail',
          name: '积分兑换明细表'
        }]
      }, {
        name: '工单报表',
        path: '/ews',
        icon: 'el-icon-s-check',
        children: [{
          path: '/ews/allEwsCountTable',
          name: '全行工单统计表'
        }, {
          path: '/ews/EwsProcessing',
          name: '工单处理情况'
        }, {
          path: '/ews/EwsAgingMonitoring',
          name: '工单时效监控表'
        }, {
          path: '/ews/subbranchEwsAcceptanceTable',
          name: '支行工单受理统计表'
        }]
      }],
      pathList: []
    }
  },
  watch: {
    $route () {
      this.handleSelect(this.$route.path)
    }
  },
  mounted () {
    console.log(this.$route)
    this.handleSelect(this.$route.path)
  },
  methods: {
    colseMenu () {
      if (this.isCollapse) {
        this.closeIcon = 'el-icon-s-fold'
        this.isCollapse = false
      } else {
        this.closeIcon = 'el-icon-s-unfold'
        this.isCollapse = true
      }
    },

    exitPage () {
      window.location.href = 'about:blank'
      window.close()
    },
    handleSelect (val) {
      this.pathList = []
      for (let item of this.navList) {
        for (let subItem of item.children) {
          if (subItem.path === val) {
            this.pathList.push({
              path: item.path,
              name: item.name
            }, {
              path: subItem.path,
              name: subItem.name
            })
            break
          }
        }
      }
    }
  }
}
</script>
<style scoped>
.containerclass {
  margin-top: 70px;
  height: calc(100vh - 70px);
}

.headerclass {
  position: fixed;
  top: 0px;
  z-index: 10000;
  height: 70px;
  width: 100%;
  background: url(../.././static/image/top-header-bg.png) no-repeat center
    center;
  background-size: 100% 140%;
}

.logoclass {
  line-height: 50px;
  height: 50px;
  width: 15%;
  background: url(../.././static/image/top-logo.png);
  background-repeat: no-repeat;
  background-position: 4px 3px;
}

.textclass {
  position: relative;
  top: -51px;
  left: 249px;
  line-height: 50px;
  height: 50px;
  font-size: 30px;
  color: rgb(255, 249, 241);
}

.left {
  float: left;
  /* width: 250px; */
  /* background: rgb(43, 106, 166); */
  overflow: auto;
  min-height: calc(100vh - 70px);
}

.closeright {
  float: left;
  width: calc(100% - 240px);
  background: rgb(244, 242, 247);
  /* overflow: auto; */
  height: calc(100vh - 70px);
}

.right {
  float: left;
  width: calc(100% - 50px);
  background: rgb(244, 242, 247);
  /* overflow: auto; */
  height: calc(100vh - 70px);
}

.rightmenu {
  position: relative;
  top: -85px;
  left: calc(100% - 50px);
  height: 50px;
  line-height: 50px;
}

.avatar-container {
  margin-right: 30px;
}

.saas-icon-power {
  color: white;
  font-size: 30px;
  position: relative;
  top: -5px;
}
</style>

<style>
/* #D3D4D7 */
#reportclass .el-menu-item:hover {
  color: #FFF !important;
  background: #a6c4de !important;
  border-left: 5px solid rgb(254, 125, 2) !important;
}

#reportclass .el-submenu__title:focus, #reportclass .el-submenu__title:hover {
  color: #FFF !important;
  background: #a6c4de !important;
  border-left: 5px solid rgb(254, 125, 2) !important;
}

#reportclass .el-submenu__title {
  font-size: 13px;
}
#reportclass .el-submenu__title i {
  color: #ffff;
  font-size: 13px;
  font-weight: 800;
}

#reportclass .el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 240px;
}

#reportclass .el-menu-item {
  font-size: 12px;
}

#reportclass .el-menu-item,
.el-submenu__title {
  height: 46px;
  line-height: 46px;
  position: relative;
  -webkit-box-sizing: border-box;
  white-space: nowrap;
  list-style: none;
}

.el-icon-s-unfold,
.el-icon-s-fold {
  color: rgb(43, 106, 166);
  font-size: 22px;
  font-weight: 700;
  float: left;
  margin-right: 10px;
  position: relative;
  top: -2px;
}
</style>
